<template>
  <van-field
    v-show="editMode"
    ref="inputRef"
    v-model="value"
    :autosize="autosize"
    :disabled="disabled"
    :label="label"
    :label-align="labelAlign"
    :maxlength="maxlength"
    :placeholder="readonly ? '' : placeholder"
    :readonly="readonly"
    :required="required"
    :rules="rules"
    :show-word-limit="showWordLimit"
    clear-trigger="focus"
    clearable
    type="textarea"
    @blur="onBlur"
    @end-validate="onEndValidate"
  />
  <van-cell v-if="!editMode" @click="onFocus">
    <template #title>
      <span v-if="required" style="color: red; margin-right: 2px">*</span>
      <span>{{ label }}</span>
    </template>
    <template #label>
      <div v-if="isEmpty(value)" style="color: #c8c9cc; font-size: 3.8vw; line-height: 6.4vw">
        {{ placeholder }}
      </div>
      <text-ellipsis v-else :content="value" :rows="rows" />
      <div v-if="_showTip" class="van-field__error-message" style="line-height: 6.4vw">
        {{ tips }}
      </div>
    </template>
  </van-cell>
</template>

<script lang="ts" setup>
import { Ref } from 'vue'
import TextEllipsis from '../TextEllipsis/index.vue'
import { isEmpty } from '@/framework/utils/common'
import { FieldInstance, FieldTextAlign } from 'vant'

const inputRef = ref<FieldInstance>()
const props = withDefaults(
  defineProps<{
    modelValue: string | null
    autosize?: boolean
    rules?: any
    label: string
    labelAlign?: FieldTextAlign
    maxlength?: string
    placeholder?: string
    rows?: string
    showWordLimit?: true
    required?: boolean
    showTip?: boolean
    readonly?: boolean
    disabled?: boolean
  }>(),
  {
    modelValue: '',
    autosize: false,
    rules: [],
    label: '',
    labelAlign: 'top',
    maxlength: '140',
    placeholder: '',
    rows: '1',
    showWordLimit: true,
    required: false,
    showTip: false,
    readonly: false,
    disabled: false
  }
)
const {
  modelValue,
  autosize,
  rules,
  label,
  labelAlign,
  maxlength,
  placeholder,
  rows,
  showWordLimit,
  showTip,
  readonly,
  disabled
} = toRefs(props)

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | null): void
  (e: 'click'): void
}>()

const value: Ref<string> = ref(modelValue.value || '')
const tips = ref('')
const _showTip = ref(showTip.value)
watch(
  () => value.value,
  () => emit('update:modelValue', value.value)
)
watch(
  () => modelValue.value,
  () => {
    value.value = modelValue.value || ''
  }
)
watch(
  () => showTip.value,
  () => (_showTip.value = showTip.value)
)
const editMode: Ref<boolean> = ref(false)
const onFocus = () => {
  if (readonly.value) {
    emit('click')
    return
  }
  editMode.value = true
  nextTick(() => {
    inputRef.value?.focus()
  })
}
const onBlur = () => {
  inputRef.value?.validate(rules.value).then(() => {
    editMode.value = false
  })
}
watch(
  () => modelValue.value,
  (val) => {
    emit('update:modelValue', val)
  }
)
const onEndValidate = ({ status, message }: any) => {
  _showTip.value = status === 'failed'
  tips.value = message
}
</script>

<style lang="less" scoped>
:deep(.van-field__control) {
  background-color: #f7f8fa;
}
</style>
